<template>
  <view class="container flex-row justify-center">
    <view class="inner-container flex-col">
      <view class="flex-row title-container justify-between">
        <view class="title">{{ title }}</view>
        <view class="flex-row right-container align-center" @click="more">
          <text class="more">更多</text>
          <image src="@/static/arrow.png" mode="widthFix" class="arrow"/>
        </view>
      </view>
      <view class="content-container" :scroll-x="true">
        <view v-for="(item, i) in list" :key="item.id" v-if="i<4" @click="toDetail(item.courseId, item.id)"
              class="flex-col item-container">
          <view class="img-container">
            <image :src="item.coverUrl" class="img" mode="aspectFill"/>
          </view>
          <text class="title">{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: "VideoListView",
  props: ['kemu', 'title', 'list'],
  data() {
    return {};
  },
  methods: {
    more() {
      this.$emit('more', this.kemu)
    },
    toDetail(courseId, id) {
      this.$emit('toDetail', {
        kemu: this.kemu,
        id,
        courseId
      })
    },
  }
}
</script>

<style lang="scss">
.container {
  margin-top: 24upx;

  .inner-container {
    width: calc(100vw - 104upx);
    background-color: #fff;
    border-radius: 20upx;
    padding: 40upx 0upx 0upx 32upx;
    box-shadow: 0 2px 10px #5c5c5c1a;

    .title-container {
      margin-bottom: 40upx;

      .title {
        height: 36upx;
        font-size: 18px;
        font-weight: bold;
      }

      .right-container {
        .more {
          font-size: 24upx;
          color: #707070;
        }

        .arrow {
          margin-left: 10upx;
          margin-right: 22upx;
          width: 14upx;
          height: 24upx;
        }
      }
    }

    .content-container {
      flex-wrap: wrap;
      padding-bottom: 20upx;
      display: flex;

      .item-container {
        width: 300upx;
        margin-right: 22rpx;
        margin-bottom: 30rpx;

        .img-container {
          width: 300upx;
          height: 204upx;

          .img {
            width: 300upx;
            height: 204upx;
            border-radius: 20upx;
          }
        }

        .title {
          margin-top: 23upx;
          font-weight: bold;
          font-size: 15px;
          color: #1A1A1A;
        }
      }
    }
  }
}
</style>
